昨天我們介紹了兩個常用圖形元件「按鈕 Button」和「文字標籤 Label」以及它們的基本用法。今天要繼續介紹另外兩個好用的元件： QSlider 拉桿和 QSpinBox 數字框。

QSlider 拉桿

QSlider 拉桿是很常見的圖形元件，強調用直觀、快速滑動的方式來選定一數值。常見的例子，有影片播放器的進度條和音量控制：

QSlier 的基本用法：先用 new 創建一個滑桿物件，用 setOrientation() 來設定滑桿方向（水平或垂直），用 setMaximum(int)/setMinimum(int) 來設定數值範圍，然後用 setValue(int) 來設定當前值：

QSlider* slider = new QSlider;
slider->setOrientation(Qt::Horizontal);
slider->setMaximum(100);
slider->setMinimum(0);
slider->setValue(50);

QSpinBox 數字框

QSpinBox 數字框跟拉桿很相似，可以選定數值。只是相對於滑桿的快速滑動，數字框更強調精確選定數字。

QSpinBox 用法也相當直觀單純，用 new 創建數字框物件，用 setMaximum(int)/setMinimum(int) 來設定數值範圍，然後用 setValue(int) 來設定當前值。QSpinBox 比較特別的是可以設定前綴和後綴，比如說：

QSpinBox* spinbox = new QSpinBox;
spinbox->setMaximum(100);
spinbox->setMinimum(0);
spinbox->setValue(50);
spinbox->setPrefix("攝氏");
spinbox->setSuffix("度");

範例：溫度選擇，聯動拉桿和數字框

我們今天的範例，會用 QSlider 和 QSpinBox 製作一個溫度選擇器，同時會聯動拉桿和數字框，所以使用者既可以用拉桿快速調整溫度，也可以用數字框微調數值。

範例同樣會有一個專案檔，和一個 CPP 檔。

專案檔 d08.pro

QT += core gui widgets # 引入 Qt 模組
TEMPLATE = app         # 這是一支應用程式
TARGET = d08           # 執行檔名稱
SOURCES += d08.cpp     # CPP檔

下面的 C++ 程式碼中，我們一共創建了三個圖形元件，一個 QLabel 標籤，一個 QSlider 拉桿，還有一個 QSpinBox 數字框。最後我們用水平排版 QHBoxLayout 把三個圖形元件排在一起。

QLabel* label = new QLabel("溫度：");

QSlider* slider = new QSlider;
slider->setOrientation(Qt::Horizontal);
slider->setMaximum(100);
slider->setMinimum(0);
slider->setValue(50);

QSpinBox* spinbox = new QSpinBox;
spinbox->setMaximum(100);
spinbox->setMinimum(0);
spinbox->setValue(50);
spinbox->setPrefix("攝氏");
spinbox->setSuffix("度");

QHBoxLayout* layout = new QHBoxLayout;
w.setLayout(layout);

layout->addWidget(label);
layout->addWidget(slider);
layout->addWidget(spinbox);

外觀搞定後，接著我們希望可以聯動拉桿和數字框，意思是當拉動拉桿時，數字框同步顯示更新數值。反過來，當調整數字框時，拉桿也會隨著滑動到對應的位置。

這個要怎麼做呢？

其實 QSlider有一個信號 (signal) 叫做 valueChanged(int)。當使用者拉動拉桿，數值被改動時，就會發送這個信號。

信號發送時，要怎麼接收並處理信號呢？剛好 QSpinBox 有一個成員函數叫做 setValue(int)，可以給數字框設定值。

所以我們只要連結 QSlider::valueChanged(int) 到 QSpinBox::setValue(int)，就可以完成單向聯動。

QObject::connect(slider, &QSlider::valueChanged, spinbox, &QSpinBox::setValue);

這樣使用者拉動拉桿時，數字框就會同步顯示更新數值囉！

反方向聯動：當使用者調整數字框時，拉桿也會隨著滑動到對應的位置，作法也類似：

QObject::connect(spinbox, &QSpinBox::valueChanged, slider, &QSlider::setValue);

以下是完整的範例程式：

#include <QApplication>
#include <QWidget>
#include <QLabel>
#include <QSlider>
#include <QSpinBox>
#include <QHBoxLayout>

int main(int argc, char *argv[])
{
  QApplication a(argc, argv);
  QWidget w;

  QLabel* label = new QLabel("溫度：");

  QSlider* slider = new QSlider;
  slider->setOrientation(Qt::Horizontal);
  slider->setMaximum(100);
  slider->setMinimum(0);
  slider->setValue(50);

  QSpinBox* spinbox = new QSpinBox;
  spinbox->setMaximum(100);
  spinbox->setMinimum(0);
  spinbox->setValue(50);
  spinbox->setPrefix("攝氏");
  spinbox->setSuffix("度");

  QHBoxLayout* layout = new QHBoxLayout;
  w.setLayout(layout);

  layout->addWidget(label);
  layout->addWidget(slider);
  layout->addWidget(spinbox);

  QObject::connect(slider, &QSlider::valueChanged, spinbox, &QSpinBox::setValue);
  QObject::connect(spinbox, &QSpinBox::valueChanged, slider, &QSlider::setValue);

  w.show();
  return a.exec();
}

馬上玩看看這個溫度選擇器吧！